<template>
  <div class="transaction_box">
    <div class='date_box'>
      <span>时间:</span>
      <el-date-picker v-model="datatimerange" :picker-options="pickerOptions" type='datetimerange'range-separator='至'start-placeholder='开始日期' end-placeholder='结束日期' @change="chooseDate">
        </el-date-picker>
        <el-button type='primary' @click="fetchTransFlow">&nbsp;&nbsp;查询&nbsp;&nbsp;</el-button>
     </div>
     <el-table :data="transFlowList" style="width: 100%">
      <el-table-column
        label="交易时间">
        <template slot-scope="props">
          {{props.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column label="交易类别">
        <template slot-scope="props">
          {{transType[props.row.dealType]}}
        </template>
      </el-table-column>
      <el-table-column label="交易金额">
        <template slot-scope="props" :class="{'gray': props.row.dealType === 1}">
          {{props.row.dealType === 0 ? '+' : '-'}}{{props.row.dealAmount}}
        </template>
      </el-table-column>
       <el-table-column
        label="交易流水号"
        prop="id">
      </el-table-column>
      <el-table-column
        label="交易方式"
        prop="dealMode">
        <span slot-scope="props">{{dealMode[props.row.dealMode]}}</span>
      </el-table-column>
      <el-table-column type="expand" label="操作" title="操作">
        <template slot-scope="props">
          <el-form label-position="right" inline class="demo-table-expand"  >
            <el-form-item label="交易描述" class="bottom_border">
              <span>{{ props.row.dealDesc }}</span>
            </el-form-item>
            <el-form-item label="收款方" class="bottom_border">
              <span>{{ props.row.payee }}</span>
            </el-form-item>
            <el-form-item label="支付方式" class="bottom_border">
              <span>{{ payType[props.row.paymentType]}}</span>
            </el-form-item>
            <el-form-item label="订单编号" class="bottom_border">
              <span>{{ props.row.orderId }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
    </el-table>
    <!-- pagination -->
    <el-row v-if="pageObj && pageObj.totalPages > 1">
      <el-pagination background layout="total, prev, pager, next, ->" :total="pageObj.totalRecords" :page-size="pageObj.pageSize" :current-page.sync="pageObj.pageIndex" @current-change="handlePage" class="page_box"></el-pagination>
    </el-row>
  </div>
</template>
<script>
  import {Table, TableColumn, Form, FormItem, DatePicker, Button, Pagination} from 'element-ui'
  import {transType, payType, dealMode} from '@/tool/index'
  import {formatDate} from '@/tool/tool'
  import {transactionFlow} from '@/service/get-data'
  import {getCookie} from '@/config/mUntils'

  export default {
    components: {
      elTable: Table,
      elTableColumn: TableColumn,
      elForm: Form,
      elFormItem: FormItem,
      elDatePicker: DatePicker,
      elButton: Button,
      elPagination: Pagination
    },
    data () {
      return {
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }, // 日期快捷键
        startTime: '',  // 开始时间
        endTime: '',  // 结束时间
        page: 1, // 参数 当前页数
        number: 10, // 每页显示数
        transFlowList: [], // 交易流水列表
        pageObj: {}, // 分页信息
        datatimerange: '' // 查询时间条件
      }
    },
    methods: {
       // 查询订单的时间条件
      chooseDate (val) {
        let startTime = val[0]
        let endTime = val[1]
        this.startTime = formatDate(startTime)
        this.endTime = formatDate(endTime)
      },
      // 获取交易流水列表
      async fetchTransFlow () {
        let res = await transactionFlow(this.startTime, this.endTime, this.page, this.number)
        res = res.data
        if (res.resultCode && res.resultCode === 2000) {
          this.transFlowList = res.data.paymentList
          this.pageObj = res.data.page
        } else {
          this.$message({
            message: res.resultMsg,
            type: 'wraming'
          })
        }
      },
      // 分页
      handlePage (page) {
        this.page = page
        this.fetchTransFlow()
      }
    },
    mounted () {
      if (this.Exam !== 1) return
      this.fetchTransFlow()
    },
    computed: {
      transType () {
        return transType
      },
      payType () {
        return payType
      },
      dealMode () {
        return dealMode
      },
      Exam () {
        return getCookie('Exam') - 0
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bottom_border{
    width:100%;
    @include border_bt();
  }
</style>

